<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body>
<div class="mui-content editinfo">
    <form method="post" id="form1" name="form1" action="" enctype="multipart/form-data" class="mui-input-group">
        <ul class="mui-table-view edit-table m-t-0 text-16">
            <li class="mui-table-view-cell">
                <a href="javascript:fn_browse();" id="imgtag">
                    <span style="line-height:55px;">头像</span>
                    <div class="mui-pull-right" id="imgdiv">
                        <img width="50" height="50" class=" img-circle" src="../images/touxiang.jpg" id="imgShow">
                    </div>
                    <input type="hidden" value="" name="avatar">
                    <input type="file" id="up_img" name="file" onchange="uploadImg(this, 'imgdiv', 'imgshow', 'picDiv1')" style="display: none;" value="">
                </a>
                <div id="picDiv1" style="width: 1px; height: 1px;"></div>
            </li>
            <li class="mui-table-view-cell">
                <a href="javascript:void(0);">
                    <span class="mui-pull-left">名称</span>
                    <div class="mui-pull-right color-999">
                        <input name="username" value="" type="text" class="text-14 mui-text-right uname" placeholder="输入名称">
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <span>ID</span>
                <div class="mui-pull-right color-999 text-14">
                    10224534213212
                </div>
            </li>
        </ul>
    </form>
    <a href="javascript:void(0);" class="mui-btn mui-btn-block m-t" title="">保存修改</a>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script src="../../Public/js/ajaxfileupload.js" charset="utf-8"></script>
<script type="text/javascript">
function fn_browse(){
    document.form1.file.click();
}
//图片上传预览    IE是用了滤镜。
function uploadImg(file, pre, imag, imgDiv){
    $.ajaxFileUpload({
        url: '/api/user/upload', //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: 'up_img', //文件上传空间的id属性  <input type="file" id="file" name="file" />
        dataType: 'json', //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数
        {
            if(data.code != 1){
                layer.open({
                    content: data.info,
                    time: 1
                });
                return false;
            }else{
                previewImage(file, pre, imag, imgDiv)
                $("input[name='avatar']").val(data.info);
                layer.open({
                    content: "上传成功，保存后查看头像",
                    time: 2
                });
            }
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
            alert("上传失败，请稍后再试。");
        }
    })
}
function previewImage(file, pre, imag, imgDiv){
    var MAXWIDTH = 200;
    var MAXHEIGHT = 200;
    var div = document.getElementById(pre);
    if (!file.value.match(/.jpg|.gif|.png|.bmp/i)) {
        $('#' + pre).next('span').css({"color": "red", "font-weight": "bold"}).text('图片类型无效！');
        return false;
    } else {
        $('#' + pre).next('span').css({"color": "green", "font-weight": "bold"}).text('图片类型符合！');
    }
    if (file.files && file.files[0]){
        div.innerHTML = '<img id=' + imag + '>';
        var img = document.getElementById(imag);

        var reader = new FileReader();
        reader.onload = function (evt) {
            img.src = evt.target.result;
            // console.log(evt.target.result)
            img.style.width = '64px';
            img.style.height = '64px';
            img.style.borderRadius = '30px';
            img.style.MozBorderRadius = '100%'
        }
        reader.readAsDataURL(file.files[0]);
    } else //兼容IE
    {
        var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
        file.select();
        $("#" + imgDiv).focus();
        //file.focus();
        var src = document.selection.createRange().text;

        div.innerHTML = '<img style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:32px;height:32px;border-radius:30px;-moz-border-radius:100%;-webkit-border-radius:100%;"  id=' + imag + '>';
        var img = document.getElementById(imag);
        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
        status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);

    }
}
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
    var param = {top: 0, left: 0, width: width, height: height};
    if (width > maxWidth || height > maxHeight)
    {
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;

        if (rateWidth > rateHeight)
        {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
        } else
        {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
        }
    }

    param.left = Math.round((maxWidth - param.width) / 2);
    param.top = Math.round((maxHeight - param.height) / 2);
    return param;
}
</script>
</html>
